<template>
  <!-- <div id="chartRef123" :style="{ width: '100%', height: '100%' }" /> -->
  <div ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
  import echarts from '@/utils/lib/echart'
  // import * as echarts from 'echarts'
  import { onMounted, watch, computed, nextTick, ref } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'
  import { tryOnUnmounted } from '@vueuse/core'
  export default {
    name: 'XmLineChart',
    props: {
      chartData: Object,
      legendData: {
        type: Array,
        default() {
          return []
        },
      },
    },
    setup(props) {
      const animationDuration = 300
      let chartRef = ref(null)
      const { setOptions, getInstance } = useECharts(chartRef, 'macarons')
      onMounted(() => {
        // 需要dom渲染出来
        const myChart = getInstance()
        if (myChart) {
          myChart.on('click', function (params) {
            const { data, dataIndex } = params
            console.log('data =' + JSON.stringify(data))
            console.log('dataIndex =' + JSON.stringify(dataIndex))
          })
        }
      })
      watch(
        () => props.chartData,
        (val) => {
          if (val && chartRef) {
            setOptionsFunc(val)
          }
        },
        { deep: true, immediate: true }
      )
      function setOptionsFunc(val) {
        console.log('setOptions =' + JSON.stringify(val))
        let start = null
        let end = null
        let dv = null
        let legend = null
        if (props.legendData.length > 0) {
          start = props.legendData[0]
          if (props.legendData.length > 1) end = props.legendData[1]
          if (props.legendData.length > 2) dv = props.legendData[2]
          if (dv && start && end) {
            legend = [start, end, dv]
          } else if (start && end) {
            legend = [start, end]
          } else if (start) {
            legend = [start]
          } else if (end) {
            legend = [end]
          } else {
            legend = []
          }
        }
        let option = {
          grid: {
            left: '3%',
            right: '3%',
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,0.8)',
            axisPointer: {
              type: 'shadow',
            },
            formatter: (params) => {
              console.log('formatter = ' + JSON.stringify(params))
              if (Array.isArray(params)) {
                let str = ''
                params.forEach((item) => {
                  str +=
                    item.marker +
                    item.seriesName +
                    ':' +
                    (item.value ? item.value : '暂无数据') +
                    '<br/>'
                })
                return str
              }
              return ''
            },
          },
          xAxis: {
            type: 'category',
            data: val.xAxis,
          },
          yAxis: {
            type: 'value',
          },
          legend: {
            data: legend,
          },
          series: [
            {
              name: start ? start : '',
              data: val.startValue,
              type: 'line',
            },
            {
              name: end ? end : '',
              data: val.endValue,
              type: 'line',
            },
            {
              name: dv ? dv : '',
              data: val.dvValue,
              type: 'line',
            },
          ],
        }
        setOptions(option)
      }

      const list = computed(() => {
        console.log('chartData =' + JSON.stringify(props.chartData))
        return ''
      })

      tryOnUnmounted(() => {
        if (!chartRef.value) return
        // removeResizeFn()
        chartRef.value.dispose()
        chartRef = null
      })
      return {
        list,
        chartRef,
      }
    },
  }
</script>

<style scoped></style>
